/*eslint-disable*/
import React from 'react'

// easing 是 maath 库中的一个模块，它包含了各种缓动函数（easing functions），这些函数可以用来控制动画的速度变化。
import { easing } from 'maath';
import { useSnapshot } from 'valtio';

// useFrame 是 @react-three/fiber 库中的一个钩子，它允许你在每一帧渲染时执行自定义的逻辑。
import { useFrame } from '@react-three/fiber';

// Decal：这个组件用于在 Three.js 场景中添加贴花效果。贴花是一种特殊的材质
// useGLTF：这是一个自定义的 React 钩子，用于加载和解析 GLTF/GLB 格式的 3D 模型
// useTexture：这也是一个自定义的 React 钩子，用于加载和解析纹理。纹理是 2D 图像，可以用来为 3D 模型添加颜色、图案等效果。
import { Decal, useGLTF, useTexture } from '@react-three/drei';

import state from '../store';
const Shirt = () => {

  const snap = useSnapshot(state);

  // 加载和解析 GLTF/GLB 格式的 3D 模型
  const {nodes, materials} = useGLTF('../../public/shirt_baked.glb');

  const logoTexture = useTexture(snap.logoDecal); // 加载和解析纹理，添加衣服的logo
  const fullTexture = useTexture(snap.fullDecal); // 加载和解析纹理,用于整个衣服
  
  useFrame((state, delta) => {
    easing.dampC(materials.lambert1.color, snap.color, 0.25, delta);
  })
  
  // 将 snap 对象转换为字符串
  const stateString = JSON.stringify(snap);
  return (
    // key 属性用于告诉 React 何时重新渲染组件。当 stateString 发生变化时，React 会重新渲染这个组件。
    <group key={stateString}>
      <mesh
        castShadow
        geometry={nodes.T_Shirt_male.geometry}
        material={materials.lambert1}
        material-roughness={1}
        dispose={null}
      >
        {snap.isFullTexture && (
          // 使用 Decal 组件添加贴花效果
          <Decal
            position={[0, 0, 0]}
            rotation={[0, 0, 0]}

            scale={1}

            map={fullTexture}
          /> 
        )}


        {snap.isLogoTexture && (
          // 使用 Decal 组件添加贴花效果
          <Decal
            position={[0, 0.04, 0.15]}
            rotation={[0, 0, 0]}

            scale={0.15}

            map={fullTexture}

            // map-anisotropy={16}
            depthTest={false}
            depthWrite={true}
          /> 
        )}
      </mesh>

    </group>
  )
}

export default Shirt
